<template>
    <div>
        <nav-title></nav-title>
        <el-form :model="queryForm" :inline="true" class="demo-form-inline">
            <el-form-item label="所属系统">
                <sys-select v-model="queryForm.sysCode" @change="getData()"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleNew">新增顶级</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="treeData" border>
            <el-table-tree-column
                    :remote="remote"
                    file-icon="icon icon-file"
                    folder-icon="icon icon-folder"
                    prop="menuCode" label="菜单编码"
                    childNumKey="childSize" levelKey="treeLevel"
                    treeKey="menuId" parentKey="parentId" min-width="200"/>
            <el-table-column prop="menuName" label="菜单名称"/>
            <el-table-column prop="menuUrl" label="菜单链接"/>
            <el-table-column prop="iconCls" label="icon"/>
            <el-table-column prop="routerPath" label="路由地址"/>
            <el-table-column prop="resourceId" label="资源id"/>
            <el-table-column fixed="right" label="操作" width="180" header-align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
                    <el-button v-if="scope.row.treeLevel==1" type="text" size="small"
                               @click="handleNewChild(scope.row)">新增子级
                    </el-button>
                    <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <menu-dialog :pk="dlg.pk" v-model="dlg.dialogVisible" :disabled="dlg.disabled"
                     @close="handleClose" :useCode="useCode" :parent-id="dlg.parentId"
        />
    </div>
</template>

<script>
  import ElTableTreeColumn from 'element-tree-grid'
  import NavTitle from '../../../components/common/NavTitle'
  import MenuDialog from './MenuDialog'
  import SysSelect from '../../../components/sys/SysSelect'

  export default {
    components: {
      SysSelect,
      MenuDialog,
      NavTitle,
      ElTableTreeColumn
    },
    data () {
      return {
        dlg: {
          dialogVisible: false,
          disabled: false,
          pk: '',
        },
        easyPage: {
          pageNumber: 1,
          pageSize: 10
        },
        queryForm: {
          sysCode: '',
        },
        treeData: [],
        useCode: '',
        parentId: ''
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        let self = this
        self.$axios
          .post('menuAction/findTree',{
            sysCode:self.queryForm.sysCode
          })
          .then(res => {
            self.treeData = res.data
          })
      },
      remote (row, callback) {
        let self = this
        self.$axios
          .post('menuAction/findTree', {
            parentId: row.menuId,
            sysCode:self.queryForm.sysCode
          })
          .then(res => {
            callback(res.data)
          })
      },
      handleNew () {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: false,
          pk: '',
          parentId: null
        }
      },
      handleNewChild (row) {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: false,
          pk: '',
          parentId: row.menuId,
        }
      },
      handleEdit (row) {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: false,
          pk: row.menuId,
        }
      },
      handleView (row) {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: true,
          pk: row.menuId,
        }
      },
      handleDel(row){
        let self = this
        self.$axios
          .post('menuAction/del', {
            menuId: row.menuId,
          })
          .then(res => {
            if (res.data.result) {
              self.getData()
              self.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              self.$message.error(res.data.msg)
            }
          })
      },
      handleClose (res) {
        if (res) this.getData()
      },
      handleStatus (row) {
        let self = this
        self.$axios
          .post('menuAction/updateStatus', {
            menuId: row.menuId,
            status: row.status
          })
          .then(res => {
            if (res.data.result) {
              self.$message({
                message: '保存成功',
                type: 'success'
              })
            } else {
              row.status = !row.status
              self.$message.error(res.data.detail)
            }
          })
      }
    }
  }
</script>
